<template>
  <div id="app">
    <Header :username="username"/>
    <router-view @login-success="updateUsername"  />
    <Footer />
  </div>
</template>

<script>
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
import {reactive,provide} from 'vue'

export default {
  data(){
      return{
        username: ""
      }
    },
  setup() {
    // 定义购物车状态
    const cart = reactive({
      cartCount: 0,
      addToCart(productId) {
        this.cartCount += 1;  // 每次点击加入购物车，数量加1
      }
    });

    // 提供购物车状态，供子组件使用
    provide('cart', cart);

    return {};
  },
  methods:{
      // 更新用户名
      updateUsername(username) {
        this.username = username;
      }
  },
  name: 'App',
  components: {
    Header,
    Footer
  }
}
</script>

